FlyTalk.views.ItinView = Ext.extend(Ext.Panel, {
	//fullscreen: true,
	scroll: false,
	title: 'Itinerary',
	//scroll: true,
	
    initComponent: function () {
		this.backButton = new Ext.Button({
			
			iconCls: 'home',
			iconMask: true,
			handler: this.backButtonTap,
			scope: this
		});
		
		this.toolbar = new Ext.Toolbar({
				title: 'ItinMapView',
				doc: 'top',
				layout: 'hbox',
				hidden: 'true',
				items: [
					this.backButton,
					{xtype: 'spacer'},
					//this.composeButton,
				]
		});
		
		this.dockedItems = [this.toolbar];
	
		Ext.regModel('TouchpointModel', {
		    fields: [ 
			{
		         name: 'detail1',
		         type: 'string'
		    }, {
		         name: 'detail2',
		         type: 'string'
		    }, {
		         name: 'detail3',
		         type: 'string'
		   }, {
				name: 'tp',
				type: 'string'
		   }, {
				name: 'imgLoc',
				type: 'string'
		   } 
		   ]
		});
		
		this.tpStore = new Ext.data.Store({
			model : 'TouchpointModel',
			autoLoad: true,

			proxy: {
          		type: 'localstorage',
        		id: 'tp-store'
    		},
			
			data: [
				{detail1: 'Check-in', detail2: 'Flight TAP001', detail3: 'Wait time: 5 min (estimated)', tp:'Check-in', imgLoc:'icoCheckIn.png'},
				{detail1: 'Security', detail2: 'Walk time: 3 min (estimated)', detail3: 'Wait time: 17 min (estimated)', tp: 'Security',imgLoc:'icosecurity.png'},
				{detail1: 'Boarding Gate: 12', detail2: 'Walk time: 13 min (estimated)', detail3: 'Boarding time: 12:30',tp: 'boarding', imgLoc:'icoboarding.png'},
				{detail1: 'Flying', detail2: 'Depart: 13:00', detail3: 'Flight Time: 3h30m',tp: 'flying', imgLoc:'icoflight.png'},
				{detail1: 'Arrive', detail2: 'Arrive: 16:30', detail3: '', tp: 'deplane', imgLoc:'icodeplane.png'},
				{detail1: 'Customs', detail2: 'Wait time: 15 min (estimated)', detail3: '', tp: 'customs', imgLoc:'icopassportcontrol.png'},
				{detail1: 'Baggage Claim', detail2: 'Carousel 34, Floor 2', detail3: 'Wait time: 10 min (estimated)', tp: 'baggage',imgLoc:'icobaggageClaim.png'},
				{detail1: 'To Destination', detail2: '', detail3: 'Find ground transportation to your final destination', tp: 'destination', imgLoc:'icodestination2.png'},
				{detail1: '', detail2: '', detail3: '', tp: '', imgLoc:'icoblank.png'},
				{detail1: '', detail2: '', detail3: '', tp: '', imgLoc:'icoblank.png'},
				{detail1: '', detail2: '', detail3: '', tp: '', imgLoc:'icoblank.png'},
			],
		});
			
		this.list = new Ext.List({
			itemTpl : '<div class="list-icon"> <img width=36px src="./images/{imgLoc}"></div> <div class="list-block"><h1 class="list-detail-large">{detail1}</h1> <p class="list-detail-small">{detail2}</p> <p class="list-detail-small">{detail3}</p></div>',
			store: this.tpStore,
			scroll: true,
			onItemDisclosure: true,	
			fullscreen: true,
			listeners:{
				itemTap: function(dv, index, tweet, evt){
					//alert(this.store.getAt(index));
					//FlyTalk.views.HotTopicsView.onSelect(this.store.getAt(index).data.topic);				
				},
								
				disclose: function(dv, tweet, index, evt){
					//Ext.Msg.alert('disclose');
					FlyTalk.views.ItinView.onDisclose(FlyTalk.views.ItinView.tpStore.getAt(index).data.tp);
				},
			}					
		});
		
		this.items = [this.list];
		
		FlyTalk.views.ItinView.superclass.initComponent.call(this);
        
    },
	
	onDisclose: function (tp) {
		
		switch (tp){
			case 'Check-in':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/checkin.png"></img></div>');
				break;
			case 'Security':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/security.png"></img></div>');
				break;
			case 'customs':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/customs.png"></img></div>');
				break;
			case 'boarding':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/boarding.png"></img></div>');
				break;
			case 'deplane':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/deplane.png"></img></div>');
				break;
			case 'destination':
				Ext.get('detailImage').update('<div><img id="tp" src="./images/destination.png"></img></div>');
				break;
			case 'baggage':
			default:
				Ext.get('detailImage').update('No Information to Show');
		}
		FlyTalk.views.ItinDetailView.toolbar.setTitle(tp);
	
		Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openItinDetail'
        });
	
    },
		
	backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },

});